<template>
    <div class="account_set_form_container">
        <el-form ref="accountSetForm" :rules="rules" :model="formData" label-width="100px">
            <el-form-item label="编码" prop="code">
                <el-input v-model="formData.code" autocomplete="off" placeholder="请输入编码" :disabled="disabledData"></el-input>
            </el-form-item>
            <el-form-item label="数据库驱动" prop="driver">
                <el-select v-model="formData.driver" style="width: 100%" :disabled="disabledData">
                    <el-option v-for="(item, index) in driverList" :key="index"
                               :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="数据库主机" prop="db_host">
                <el-input v-model="formData.db_host" autocomplete="off" placeholder="数据库主机" :disabled="disabledData"></el-input>
            </el-form-item>
            <el-form-item label="数据库端口" prop="db_port">
                <el-input v-model="formData.db_port" autocomplete="off" placeholder="数据库端口" v-int :disabled="disabledData" />
            </el-form-item>
            <el-form-item label="数据库名称" prop="db_name">
                <el-input v-model="formData.db_name" autocomplete="off" placeholder="请输入数据库名称" :disabled="disabledData"></el-input>
            </el-form-item>
            <el-form-item label="数据库用户名" prop="db_user_name">
                <el-input v-model="formData.db_user_name" autocomplete="off"
                          placeholder="请输入数据库用户名" :disabled="disabledData"></el-input>
            </el-form-item>
            <el-form-item label="数据库密码" prop="db_password">
                <el-input v-model="formData.db_password" autocomplete="off"
                          placeholder="请输入数据库密码" :disabled="disabledData"></el-input>
            </el-form-item>
            <el-form-item label="数据访问url" prop="db_url">
                <el-input v-model="dbUrl" type="textarea" autosize autocomplete="off"
                          placeholder="自动生成" disabled />
            </el-form-item>
            <el-form-item label="模块" prop="mode">
                <el-checkbox-group v-model="formData.mode">
                    <template v-for="(item, index) in modeList">
                        <el-checkbox :key="index" :label="item.value">{{ item.display_text }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="用户数限制" prop="uc_limit">
                <el-input v-model="formData.uc_limit" autocomplete="off" placeholder="请输入用户数限制"
                          v-int />
            </el-form-item>
            <el-form-item label="到期日期" prop="end_date">
                <el-date-picker v-model="formData.expired_date" type="date"
                                placeholder="请选择截止时间" value-format="yyyy-MM-dd" />
            </el-form-item>
            <el-form-item label="版本" prop="version">
                <el-select v-model="formData.version" style="width: 100%">
                    <el-option v-for="(item, index) in versionList" :key="index"
                               :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="归属客户" prop="owner_sid">
                <el-select value-field-name="sid" v-model="formData.owner_sid" style="width: 100%"
                           :remote-method="queryClient"
                           filterable remote>
                    <el-option v-for="(item, index) in clientList" :key="index"
                               :label="item.name" :value="item.sid" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="note_info">
                <el-input type="textarea" v-model="formData.note_info" autocomplete="off" :rows="2"
                          autosize></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState } from "vuex";
import baseRelatedPartyApi from "@common/api/base/baseRelatedPartyApi";

export default {
    name: "AccountSetForm",
    props: {
        propsData: {
            type: Object,
            default() {
                return {
                    init: true,
                };
            },
        },
    },
    data() {
        return {
            template: 'jdbc:mysql://数据库主机:数据库端口/数据库名称?useUnicode=true&useSSL=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8&allowMultiQueries=true',
            modeList: [],
            clientList: [],
            versionList:[{name:"免费版",value:"free"},{name:"基础版",value:"basic"},{name:"专业版",value:"pro"},{name:"旗舰版",value:"ultimate"},],
            rules: {
                code: [
                    { required: true, message: '请输入编码', trigger: 'blur' },
                ],
                db_name: [
                    { required: true, message: '请输入数据库名称', trigger: 'blur' },
                    // { pattern: /^[A-Za-z0-9_]{1,32}$/, message: '最大 32 位大小写英文、数字' }
                ],
                driver: [
                    { required: true, message: '请选择数据库驱动', trigger: 'change' },
                ],
                db_host: [
                    { required: true, message: '请输入数据库主机', trigger: 'blur' },
                ],
                db_port: [
                    { required: true, message: '请输入数据库端口', trigger: 'blur' },
                ],
                db_user_name: [
                    { required: true, message: '请输入数据库用户名', trigger: 'blur' },
                ],
                db_password: [
                    { required: true, message: '请输入数据库密码', trigger: 'blur' },
                ],
                mode: [
                    { required: true, message: '请选择模块', trigger: 'change' },
                ],
                version: [
                    { required: true, message: '请选择版本', trigger: 'change' },
                ],
            },
            formData: {},
        };
    },
    computed: {
        ...mapState('system', [ 'driverList' ]),
        disabledData() {
            return this.$utils.isNotEmpty(this.formData.sid);
        },
        dbUrl() {
            let templateUrl = this.template;
            if (this.$utils.isNotEmpty(this.formData.db_host)) {
                templateUrl = templateUrl.replace('数据库主机', this.formData.db_host);
            }
            if (this.$utils.isNotEmpty(this.formData.db_port)) {
                templateUrl = templateUrl.replace('数据库端口', this.formData.db_port);
            }
            if (this.$utils.isNotEmpty(this.formData.db_name)) {
                templateUrl = templateUrl.replace('数据库名称', this.formData.db_name);
            }
            if (templateUrl === this.template) {
                return '';
            }
            return templateUrl;
        },
    },
    watch: {
        propsData: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (_this.propsData.init) {
                return;
            }
            _this.modeList = _this.propsData.modeList || [];
            _this.queryClient();
            if (_this.$refs.accountSetForm) {
                _this.$refs.accountSetForm.clearValidate();
            }
            _this.formData = $.extend({}, _this.propsData.row);
            if (!_this.$utils.isNotEmpty(_this.formData.uc_limit)) {
                _this.formData = $.extend({}, _this.formData, {
                    uc_limit: 1,
                });
            }
        },
        queryClient(val) {
            const _this = this;
            _this.clientList = [];
            baseRelatedPartyApi.findBaseRelatedPartys({
                search_value: val,
                pageIndex: 1,
                pageSize: 20,
                skip_permission: 1,
            }, result => {
                _this.clientList = result.data || [];
            });
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('accountSetForm');
            if (valid) {
                let subData = $.extend({}, _this.formData);
                return _this.fetchData(_this.$api.API_SaveSysAccountSet, subData).then(() => {
                    _this.$message.success('保存成功！');
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.account_set_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
